<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>树结构</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-viewlist"></em>
  <span class="title">按钮列表</span>
</div>
<div class="pz-boxbody fn-clear">
  <div id="j-tree1" class="pz-tree fn-mg15 fn-left">
    <table>
      <tr>
        <td class="arrow">
          <i class="pz-icon icon-iccaretdown j-switchlist"></i>
        </td>
        <td class="checkbox">
          <label><input type="checkbox" class="j-list-id" value="1001" checked="">机构管理</label>
        </td>
      </tr>
      <tr class="j-treelist">
        <td colspan="2" class="treelist">
          <table>
            <tr>
              <td class="arrow">
                <i class="pz-icon icon-more"></i>
              </td>
              <td class="checkbox">
                <label><input type="checkbox" class="j-list-id" value="10011">机构列表</label>
              </td>
            </tr>
            <tr>
              <td class="arrow">
                <i class="pz-icon icon-more"></i>
              </td>
              <td class="checkbox">
                <label><input type="checkbox" class="j-list-id" value="10012">机构管理员</label>
              </td>
            </tr>
            <tr>
              <td class="arrow">
                <i class="pz-icon icon-iccaretdown j-switchlist"></i>
              </td>
              <td class="checkbox">
                <label><input type="checkbox" class="j-list-id" value="10013" checked="">角色管理</label>
              </td>
            </tr>
            <tr class="j-treelist">
              <td colspan="2" class="treelist">
                <table>
                  <tr>
                    <td class="arrow">
                      <i class="pz-icon icon-more"></i>
                    </td>
                    <td class="checkbox">
                      <label><input type="checkbox" class="j-list-id" value="100131">角色列表</label>
                    </td>
                  </tr>
                  <tr>
                    <td class="arrow">
                      <i class="pz-icon icon-more"></i>
                    </td>
                    <td class="checkbox">
                      <label><input type="checkbox" class="j-list-id" value="100132" checked="">分配权限</label>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="arrow">
          <i class="pz-icon icon-iccaretdown j-switchlist"></i>
        </td>
        <td class="checkbox">
          <label><input type="checkbox" class="j-list-id" value="1002">应用管理</label>
        </td>
      </tr>
      <tr class="j-treelist">
        <td colspan="2" class="treelist">
          <table>
            <tr>
              <td class="arrow">
                <i class="pz-icon icon-more"></i>
              </td>
              <td class="checkbox">
                <label><input type="checkbox" class="j-list-id" value="10021">应用版本</label>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div id="j-tree2" class="pz-tree fn-mg15 fn-left">
    <script type="text/template">
    <table>
      {@each data as item}
      {@if item.childList && item.childList.length > 0}
      <tr>
        <td class="arrow">
          <i class="pz-icon icon-iccaretdown j-switchlist"></i>
        </td>
        <td class="checkbox">
          <label><input type="checkbox" class="j-list-id" value="${item.id}" {@if item.checked}checked{@/if}>${item.permName}</label>
        </td>
      </tr>
      <tr class="j-treelist">
        <td class="treelist" colspan="2">
          $${item.childHtml}
        </td>
      </tr>
      {@else}
      <tr>
        <td class="arrow">
          <i class="pz-icon icon-more"></i>
        </td>
        <td class="checkbox">
          <label><input type="checkbox" class="j-list-id" value="${item.id}" {@if item.checked}checked{@/if}>${item.permName}</label>
        </td>
      </tr>
      {@/if}
      {@/each}
    </table>
    </script>
  </div>
</div>
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script type="text/javascript" src="//static.xinhuaapp.com/js/juicer-min.js"></script>
<script type="text/javascript" src="../pizza/js/pizza.js?_t=1510649614000"></script>
<script type="text/javascript">
// 树  展开 收缩
function switchlistFn(obj){
  var todo = '';
  if (obj.hasClass('icon-iccaretright')) {
    todo = 'open';
    obj.removeClass('icon-iccaretright').addClass('icon-iccaretdown');
  } else if (obj.hasClass('icon-iccaretdown')) {
    todo = 'close';
    obj.removeClass('icon-iccaretdown').addClass('icon-iccaretright');
  }
  var treelistObj = obj.parents('tr').eq(0).next();
  if (todo == 'open') {
    treelistObj.css('display', 'table-row');
  } else if (todo == 'close') {
    treelistObj.css('display', 'none');
  }
}
// 触发上级选中
function parentChecked(obj){
  var trObj = obj.parents('.j-treelist').eq(0);
  if (trObj.length) {
    var inputObj = trObj.prev().find('.j-list-id');
    inputObj[0].checked = true;
    parentChecked(inputObj);
  }
}
// 触发下级解绑
function parentUnChecked(obj){
  var trObj = obj.parents('tr').eq(0),
    nextTrObj = trObj.next();
  if (nextTrObj.length && nextTrObj.hasClass('j-treelist')) {
    nextTrObj.find('.j-list-id').each(function(){
      this.checked = false;
    });
  }
}

// 绑定树 展收
$('#j-tree1 .j-switchlist').click(function(){
  switchlistFn($(this));
});
// 绑定操作
$('#j-tree1 .j-list-id').click(function(){
  if (this.checked) {
    parentChecked($(this));
  } else {
    parentUnChecked($(this));
  }
});

var tree2Json = {
  "status": "1",
  "data": [
    {
      "id": 1001,
      "permName": "机构管理",
      "checked": true,
      "childList": [
        {
          "id": 10011,
          "permName": "机构列表"
        }, {
          "id": 10012,
          "permName": "机构管理员",
          "checked": true
        }, {
          "id": 10013,
          "permName": "角色管理",
          "childList": [
            {
              "id": 100131,
              "permName": "角色列表"
            }, {
              "id": 100132,
              "permName": "分配权限"
            }
          ]
        }
      ]
    }, {
      "id": 1002,
      "permName": "应用管理",
      "childList": [
        {
          "id": 10021,
          "permName": "应用版本"
        }
      ]
    }
  ]
};
// 拼接权限树
var roleTreeTpl = juicer($('#j-tree2 script').html());
$('#j-tree2 script').remove();
function roleTree (treeData) {
  $.each(treeData['data'], function(){
    if (this['childList'] && this['childList'].length) {
      // 递归
      this['childHtml'] = roleTree({"parentId":this['id'],"data":this['childList']});
    }
  });
  return roleTreeTpl.render(treeData);
}
$('#j-tree2').html(roleTree(tree2Json));
// 绑定树 展收
$('#j-tree2 .j-switchlist').click(function(){
  switchlistFn($(this));
});
// 绑定操作
$('#j-tree2 .j-list-id').click(function(){
  if (this.checked) {
    parentChecked($(this));
  } else {
    parentUnChecked($(this));
  }
});

</script>
</body>
</html>